<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="web前端，web前端个人简历，前端开发">
    <meta name="description" content="孙裕的web前端工程师个人简历">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web前端个人简历</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.css">
</head>
<body>
<div id="head">
    <div class="head-left"><!--头部信息栏personal-->
        <img src="../image/5.jpg">
        <div id="head-tit">
            <span id="head-e">Mr.sun</span><hr/><!--index.js中使用.hover伪类实现移入移出的变换-->
            <span id="head-c">Personal Resume</span>
        </div>
    </div>
    <div class="head-right"><!--首页导航栏-->
        <ul >
            <li><a href="#page1">首页</a></li>
            <li><a href="#page2">关于我</a></li>
            <li><a href="#page3">心路历程</a></li>
            <li class="head-view"><a href="#page4">专业技能</a></li>
            <li class="head-view"><a href="#page5">项目作品</a></li>
            <li><a href="#page6">call me</a></li>
        </ul>
    </div>
</div>
<div id="fullpage"><!--使用fullpage.js的html结构-->
    <div class="section section1"><!--第一屏-->
        <h1>唯有努力不被辜负</h1>
        <div class="sec1p">
            <p class="secp1">你要相信，每个人都是被上帝咬过的苹果</p>
            <p class="secp2">正因为如此，你才明白</p>
            <p class="secp3">所谓优秀与缺陷才是并存的</p>
        </div>
    </div>
    <div class="section section2" ><!--第二屏-->
        <h1>自我介绍</h1>
        <div class="sec2Bor">
            <div class="sectionText">
                <img src="../image/6.jpg">
                <p>姓名： 孙裕</p>
                <p>年龄：22</p>
                <p>phone：18700408458</p>
                <p>e-mail：1227427742@qq.com</p>
                <p>title：前端工程师</p>
                <p>career：西安理工大学</p>
            </div>
        </div>
    </div>
    <div class="section section3"><!--第三屏幕-->
       <div id="sec3Nav">
           <ul>
               <li class="sec3-li1"><span>1</span><a href="javascript:;">自我介绍</a></li>
               <li class="sec3-li2"><span>2</span><a href="javascript:;">对于web前端的看法</a></li>
               <li class="sec3-li3"><span>3</span><a href="javascript:;">为什么不从事本专业</a></li>
               <li class="sec3-li4"><span>4</span><a href="javascript:;">自身优势以及不足之处</a></li>
               <li class="sec3-li5"><span>5</span><a href="javascript:;">未来规划</a></li>
           </ul>
       </div>
       <div class="sec3Wrap">
           <div class="sec3Box">
                <p class="sec3-p1">您好，我是孙裕</p>
                <p class="sec3-p2">毕业于西安理工大学</p>
                <p class="sec3-p3"align="">性格沉稳，不浮躁，不偏激，不守旧</p>
                <p class="sec3-p4">喜欢研究一些新事物</p>
                <p class="sec3-p5">爱好运动，爱好旅行</p>
                <p class="sec3-p7"align="">执行力能力强，学习能力优秀</p>
                <p class="sec3-p8">可以依据设计图高度完成项目</p>
                <p class="sec3-p5">路程虽远，必奋力前行</p>
           </div>
           <div class="sec3Box">
                <p class="sec3-p1">web前端</p>
                <p class="sec3-p2">是一种新兴且设置面广的一门技术</p>
                <p class="sec3-p3">css3及html5的兴起，让webApp成了一类热门选项</p>
                <p class="sec3-p4">让webApp有了长足的发展</p>
                <p class="sec3-p5">javascript语言的不断更新及发展</p>
                <p class="sec3-p6">有着“一统江湖”的趋势</p>
                <p class="sec3-p7">要成为一名合格前端攻城狮必须不断学习</p>
           </div>
           <div class="sec3Box">
               <p class="sec3-p1">工作本应在解决温饱的情况下，</p>
               <p class="sec3-p2">为兴趣而生</p>
               <p class="sec3-p3">恰巧有那么一种工作</p>
               <p class="sec3-p4">在你物质满足的基础上</p>
               <p class="sec3-p5">同时充实了你的内心</p>
               <p class="sec3-p6">误入深坑，却爱的无法自拔</p>
           </div>
           <div class="sec3Box">
               <p class="sec3-p1">不足之处在于，大学专业并非计算机</p>
               <p class="sec3-p2">当初入it行业</p>
               <p class="sec3-p3">夹杂着兴奋与懵懂</p>
               <p class="sec3-p4">一楼跌跌撞撞走来</p>
               <p class="sec3-p5">踩过了很多坑，同时也学会了更多的东西</p>
               <p class="sec3-p6">唯有喜爱，才能不悔</p>

           </div>
           <div class="sec3Box">
               <p class="sec3-p1">敲代码是一种很有乐趣的事情</p>
               <p class="sec3-p2">有人说it是吃青春饭的</p>
               <p class="sec3-p3">但是我觉得只要奋发向前</p>
               <p class="sec3-p4">不被时间所抛弃</p>
               <p class="sec3-p5">那么你总是不会成为</p>
               <p class="sec3-p6">被抛弃的那个</p>
           </div>
       </div>
    </div>


    <div class="section section4">
        <h1>·专业技能·</h1>
        <div class="sec4-pic">
            <span id="pic-h">
                <p class="h-tit">HTML</p>
                <ul class="sec4-list">
                    <li class="head-view">熟练HTML/XHTML标记语言</li>
                    <li>深刻理解web标准</li>
                    <li>熟练HTML熟悉盒模型和各类布局方式、 能够根据设计图实现页面布局和交互效果</li>
                    <li>对HTML5 移动web应用有一定的了解</li>
                </ul>
            </span>
            <span id="pic-c">
                <p class="c-tit" >CSS</p>
                <ul class="sec4-list">
                    <li>熟练运用css及css新特性</li>
                    <li>掌握css3标准，能够解决常见兼容性问题</li>
                    <li>熟悉BootStrap框架，实践过响应式布局</li>
                </ul>
            </span>

            <span id="pic-j">
                <p class="j-tit" >JavaScript</p>
                <ul class="sec4-list">
                    <li>原生js基础扎实，对闭包，作用域，对js面向对象编程的思想有一定的了解</li>
                    <li class="head-view">熟悉js dom,ajax能够编写js原生代码</li>
                    <li>熟练掌握jQuery</li>
                    <li>注重javascript的性能优化</li>
                    
                </ul>
            </span>
            <span id="pic-aj">
                <p class="aj-tit">Skill</p>
                <ul class="sec4-list">
                    <li>熟练使用firebug，chrome调试工具调试代码</li>
                    <li class="head-view">了解网页中 SEO 的一些基本理念</li>
                    <li>熟练使用ps,webstrom，dreamweaver等工具进行前端页面手工式开发</li>
                    <li>正在深入学习react</li>
                </ul>
            </span>
        </div>
    </div>
    <div class="section section5">
        <h1>·我的作品·</h1>
        <div class="slide"><!--<div class="section xxx">
                                    <div class="slide"></div>
                                    <div class="slide"></div>实现横向滚动
                            </div>-->
          <img class="pic3" src="../image/gowhere1.png" alt="去哪儿">
          <img class="pic2" src="../image/gowhere1.png" alt="去哪儿">
          <img class="pic1" src="../image/gowhere1.png" alt="去哪儿">
          <div class="slide-text">
            <h2>去哪儿仿</h2>
            <p><strong>技术实现：</strong>HTML5、CSS3\jQuery、Bootstrap</p>
            <p><strong>项目描述：</strong>使用HTML5及CSS3对页面进行搭建，实现动画交互<br>展现扁平化效果来向用户传递信息</p>
            <p><strong>实现技术：</strong></p>
            <ul>
              <li>根据产品需求分析并给出最优的网页前端结构解决方案并完成效果实现</li>
              <li>利用css+html等将页面实现，高度还原设计图</li>
              <li>用js、jQuery以及Bootstrap对页面原型进行布局搭建，并进行特效制作</li>
            </ul>
            <p><strong>项目收获：</strong></p>
            <ul>
              <li>使用html5 css3特性对页面进行制作，效果显著</li>
              <li>熟练原生javascript、jQuery的使用</li>
              <li>对项目的前端流程有了一定的认识，为以后的项目积累了经验</li>
            </ul>
            <span class="addr">项目地址：</span><a href="goWhere.html" target="blank">跳转</a>
          </div>
        </div>
        <div class="slide">
          <img class="pic3" src="../image/gowhere1.png" alt="去哪儿">
          <img class="pic2" src="../image/gowhere1.png" alt="去哪儿">
          <img class="pic1" src="../image/gowhere1.png" alt="去哪儿">
          <div class="slide-text">
            <h2>去哪儿仿</h2>
            <p><strong>技术实现：</strong>HTML5、CSS3\jQuery、javascript</p>
            <p><strong>项目描述：</strong>实现商品展示，实现登陆、立即购买功能</p>
            <p><strong>实现技术：</strong></p>
            <ul>
              <li>根据产品需求分析并给出最优的网页前端结构解决方案并完成效果实现</li>
              <li>利用div+css等将页面实现，高度还原设计图</li>
              <li>使用原生javascript完成页面动态交互</li>
            </ul>
            <p><strong>项目收获：</strong></p>
            <ul>
              <li>深刻理解了javascript性能优化</li>
              <li>熟练原生javascript、jQuery的使用</li>
              <li>熟悉了css3标准，解决常见兼容性问题</li>
            </ul>
            <span class="addr">项目地址：</span><a href="goWhere.html" target="blank">跳转</a>
          </div>
        </div>
         <!-- 第四屏 -->
        <div class="slide">
          <img class="pic3" src="../image/gowhere1.png" alt="去哪儿">
          <img class="pic2" src="../image/gowhere1.png" alt="去哪儿">
          <img class="pic1" src="../image/gowhere1.png" alt="去哪儿">
          <div class="slide-text">
            <h2>去哪儿仿</h2>
            <p><strong>技术实现：</strong>HTML5、CSS3\jQuery</p>
            <p><strong>项目描述：</strong>使用div+csss完成页面构建，实现动态交互，更好的达到展示效果</p>
            <p><strong>实现技术：</strong></p>
            <ul>
              <li>根据产品需求分析并给出最优的网页前端结构解决方案并完成效果实现</li>
              <li>利用css+html等将页面实现，高度还原设计图</li>
              <li>用js、jQuery对页面原型进行布局搭建，并进行特效制作</li>
            </ul>
            <p><strong>项目收获：</strong></p>
            <ul>
              <li>巩固了原生js基础，对闭包，作用域，对js面向对象编程的思想有了一定的了解</li>
              <li>了解网页中 SEO 的一些基本理念</li>
              <li>熟练使用firebug，chrome调试工具调试代码</li>
            </ul>
            <span class="addr">项目地址：</span><a href="goWhere.html" target="blank">跳转</a>
          </div>
        </div>
    </div>
   <!-- 第六屏-->
    <div class="section section6">
        <h1 id="sec6-h">联系我</h1>
       <!-- /*<img class="sec6-pic1" src="" alt="">*/-->
       <!-- <div class="sec6-p">-->
           <!-- <div>
                <img id="sec6pic" src="">
            </div>-->
            <ul>
                <li>电话：18700408458</li>
                <li>邮箱：sy199503030916@163.com</li>
                <li>Q Q：1227427742</li>
            </ul>
       <!-- </div>-->
    </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.3.3/move.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>